<template>
    <div id="reportScreen" :class="{'reportScreen':true,'labHome':true}">
        <el-row style = "height:100%;width:100%;" :gutter="20">
            <el-col :span="7" >
                <div class = "lrTop">
                    <div class = "title"><img src= "../assets/bsImg/title1.png"   /> 水源水水质</div>
                    <div class = "conTable">
                        <table class="table table-bordered">
                            <tr>
                            <th style = "width:50%;">指标</th> 
                            <th style = "width:30%;">日期</th> 
                            <th>{{rawWaterData.name}}</th> 
                            </tr>
                            <tr v-for="item in rawWaterData.items" :key = "item.id">
                                <td>{{item.itemName}} {{item.hasOwnProperty('unitName')?"(" + item.unitName + ")" : ""}}</td>
                                <td class = "colorTd">{{item.hasOwnProperty('date')?item.date.substring(0,10):"/"}}</td>
                                <td class = "colorTd">{{item.value == undefined ? "/":item.value}}</td>
                            </tr>
                        </table>
                    </div>
                    
                </div>
                <div class = "lrBottom">
                      <div class = "title"><img src= "../assets/bsImg/title1.png"  style = "vertical-align:middle;height:50%;margin-right:10px" /> 出厂水水质</div>
                    <div class = "conTable">
                        <table class="table table-bordered">
                            <tr>
                                <th style = "width:50%;">指标</th> 
                                <th style = "width:30%;">日期</th> 
                                <th>{{outWater.name}}</th> 
                            </tr>
                            <!--<div v-if = "outWater.length == 0" style = "text-align:center;line-height:3rem">
                                暂无数据
                            </div>
                            <div v-if = "outWater.length != 0 && outWater.items.length != 0" style = "text-align:center;line-height:3rem">
                                暂无数据
                            </div>-->
                            <!--<div v-if = "outWater.length !== 0 && outWater.items.length != 0">-->
                                <tr v-for="item in outWater.items " :key = "item.id" >
                                    <td>{{item.itemName}} {{item.hasOwnProperty('unitName')?"(" + item.unitName + ")" : ""}}</td>
                                    <td class = "colorTd">{{item.hasOwnProperty('date')?item.date.substring(0,10):"/"}}</td>
                                    <td class = "colorTd">{{item.value == undefined ? "/":item.value}}</td>
                                </tr>
                            <!--</div>-->
                        </table>
                    </div>
                    
                </div>
            </el-col>
            <el-col :span="10" >
                <div style = "width:100%;height:100%;">
                    <div class = "title"><img src= "../assets/bsImg/title3.png" /> 地图</div>
                    <div class = "conTable" style = "height:calc(100% - 3rem);width:100%;padding:10px 0 0;background:rgba(8,27,70,0.5);">
                        <iframe :src="url" id="workFlowIframe" ref="workFlowIframe" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
                    </div>
                </div>
            </el-col>  
            <el-col :span="7">
                <div class = "lrTop" style = "height:40%;">
                    <div class = "title"><img src= "../assets/bsImg/title1.png"   /> 管网水水质</div>
                    <div class = "conTable">
                        <table class="table table-bordered">
                            <tr>
                            <th style = "width:50%;">指标</th> 
                            <th style = "width:30%;">日期</th> 
                            <th>{{websiteWater.name}}</th> 
                            </tr>
                            <tr v-for="item in websiteWater.items" :key = "item.id">
                                <td>{{item.itemName}} {{item.hasOwnProperty('unitName')?"(" + item.unitName + ")" : ""}}</td>
                                <td class = "colorTd">{{item.hasOwnProperty('date')?item.date.substring(0,10):"/"}}</td>
                                <td class = "colorTd">{{item.value == undefined ? "/":item.value}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class = "lrBottom" style = "height:calc(60% - 0.6rem)">
                     <div style = "height:30%;width:100%">
                         <div class = "title"><img src= "../assets/bsImg/title4.png"/> 综合合格率</div>
                        <div id="zonghe" style = "width:100%;height:calc(100% - 40px);display:inline-block" ></div>
                    </div>
                    
                    <div style = "height:69%;width:100%;color:#fff">
                        <div class = "title">
                            <div style = "float:left">
                                <img src= "../assets/bsImg/title2.png"/>
                                单项合格率 
                            </div>
                            <div style = "float:right;margin-right:8px;">
                                <span style = "display:inline-block;width:14px;height:14px;border-radius:50%;background:#f5b031;vertical-align:middle;margin:5px;"></span> 官网水
                                <span style = "display:inline-block;width:14px;height:14px;border-radius:50%;background:#05fafa;vertical-align:middle;margin:5px;"></span> 出厂水
                            </div>    
                        </div>
                        <div id="rawWaterchart" style = "height:100%;height:calc(100% - 40px)"></div>
                    </div>
                </div>
            </el-col>
            
        </el-row>
        <!--<el-col>
        <embed src="../assets/img/test.pdf" width="100%" height="100%">
    </el-col>-->
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import $ from 'jquery'

    export default {

        data() {
            return {
                rawWaterData:[{items:[]}], //水源水
                websiteWater:[{items:[]}], //管网水
                outWater:[{items:[],}],//出厂水
            
                setIntervalTimes:null,
                setIntervalTimes1:null,
                setIntervalTimes2:null,
                timer:null,
                url:"",
            }

        },
        mounted() { 
            if(process.env.NODE_ENV == 'development'){
                this.url = "../static/Caribbean.html"
            
            }else{
                this.url = "static/Caribbean.html"
            
            }
            //  1,"DOA0101";//管网水
            // 2,"DOA0102";//出厂水
            // 3,"DOA0201";//水源水
            this.randerData();
            this.timer = setInterval(() =>{
                clearInterval(this.setIntervalTimes);        
                this.setIntervalTimes = null;
                clearInterval(this.setIntervalTimes1)
                this.setIntervalTimes1 = null;
                clearInterval(this.setIntervalTimes2)
                this.setIntervalTimes2 = null;

                this.randerData();
            },600000)
        },
        beforeDestroy(){

            clearInterval(this.setIntervalTimes)
            clearInterval(this.setIntervalTimes1)
            clearInterval(this.setIntervalTimes2)
            clearInterval(this.timer)
            
        },
        watch: {

        },

        methods: {
            // 渲染数据
            randerData(){
                // 管网水
                this.getTableData({waterType:1,ename:'center'}).then(res => {
                    var listCount = 0;
                    this.websiteWater = res.data[listCount];
                    this.setIntervalTimes = setInterval(() =>{
                        listCount ++ 
                        if(listCount >= res.data.length){
                            listCount = 0;
                        }
                        this.websiteWater = res.data[listCount];
                        
                    },5000)
                    // 
                })
                // 出厂水
                this.getTableData({waterType:2,ename:'center'}).then(res => {
                    var listCount = 0;
                    this.outWater = res.data[listCount];
                    this.setIntervalTimes1 = setInterval(() =>{
                        listCount ++ 
                        if(listCount >= res.data.length){
                            listCount = 0;
                        }
                        this.outWater = res.data[listCount];
                        
                    },5000) 
                })
                // 水源水
                this.getTableData({waterType:3,ename:'center'}).then(res => {
                    var listCount = 0;
                    this.rawWaterData = res.data[listCount];
                    this.setIntervalTimes2 = setInterval(() =>{
                        listCount ++ 
                        if(listCount >= res.data.length){
                            listCount = 0;
                        }
                        this.rawWaterData = res.data[listCount];
                        
                    },5000) 
                })
                // 出厂水和管网水 合格率
                this.getRate().then(res =>{
                    var xArr = [];
                    var dataArr = [];
                    var dataArr1 = [];
                    for(var i in res.data.outFacList){

                        res.data.outFacList[i].rate1 = res.data.outFacList[i].rate
                    }
                    for(var i in res.data.pipeNetList){

                        res.data.pipeNetList[i].rate2 = res.data.pipeNetList[i].rate

                    }
                    
                    // var newObj = this.extend(outFacList,pipeNetList)
                    var newObj = this.extend(res.data.outFacList,res.data.pipeNetList)
                    // console.log(newObj)
                    for(var i in newObj){ //合并数据
                        xArr.push(i);
                        dataArr.push(newObj[i].rate1) //出厂水
                        dataArr1.push(newObj[i].rate2)  //管网水
                    }
                    this.drawLine2(xArr,dataArr,dataArr1) 
                    
                    // 合格率
                    var xAlias = [];
                    var yData = [];
                    for(var i in res.data.comprehensive){
                        xAlias.push(i);
                        yData.push(res.data.comprehensive[i].rate)
                    }
                    
                    this.drawLine(xAlias,yData)
                });
            },
            extend(target, source) {
                // 下面循环的方式是在target上追加source的键值对，如果两者都存在相同的键，则保留值大的
                var len =  Object.keys(target).length
                var len1 =  Object.keys(source).length
                var obj = {};
                if(len >= len1){
                    for(var key in target){
                        if(source[key] != undefined && source[key] != null){
                            var  objKey = Object.assign(source[key],target[key])
                            target[key] = objKey
                        }
                    }
                    obj = Object.assign(source,target)

                }else{ //第二个对象比较长
                    for(var key in source){
                        if(target[key] != undefined && target[key] != null){
                            var  objKey = Object.assign(target[key],source[key])
                            source[key] = objKey
                        }
                    }
                    obj = Object.assign(target,source)
                }
                // console.log(obj)
                return obj;
            },
            getTableData(params){
                return new Promise((resolve, reject) => {
                    this.$http({
                        method: 'post',
                        apiUrl: '/screen/source.htm',
                        params: params,
                        isJson: false,
                    }).then(res => {
                        if (res.code === 0) {
                            resolve(res)
                        }else{
                            reject("err")
                        }
                    })
                })
                
            },
            getRate(){
                return new Promise((resolve, reject) => {
                    this.$http({
                        method: 'post',
                        apiUrl: '/rate/getRate.htm',
                        params: {
                            ename:"center"
                        },
                        isJson: false,
                    }).then(res => {
                        if (res.code === 0) {
                            resolve(res)
                        }else{
                            reject("err")
                        }
                    })
                })
               
            },
        
           drawLine(xData,yData) {
            //    var width = $("#zongheDiv").width();
            //     var height = $("#zongheDiv").height();
            //     console.log(width,height)
            //     $("#zonghe").css("width", width).css("height", height);
               let zongheChart = this.$echarts.init(document.getElementById('zonghe'))
                
               
                // 绘制图表
                zongheChart.setOption({
                    // title: {
                    //     text: '综合合格率',
                    //     x: '5%',
                    //     textStyle: {
                    //         fontSize: 12,
                    //         color:'#fff'
                    //     }
                    // },
                    tooltip: {
                        trigger: 'axis',
                    },
                    grid: {
                        top:"20",
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis:[{
                        name: '月份',
                        type: 'category',
                        data: xData.map(function (str) {
                                str = str.substring(5,7)
                                return str
                                // return  str.replace(' ', '\n')
                            }),
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#FFF',  //更改坐标轴文字颜色
                                fontSize : 12      //更改坐标轴文字大小
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#55bafe'
                            }
                        },
                    }],
                    yAxis: {
                        // name: '',
                        type: 'value',
                        splitLine:{       //y轴
                            show:false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#FFF',  //更改坐标轴文字颜色
                                fontSize : 12      //更改坐标轴文字大小
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#55bafe'
                            }
                        },
                        max:100,
                        min:0,
                        splitNumber: 2,
                    },
                    series: [{
                        data:yData,
                        type: 'line',
                        smooth: true,
                        itemStyle : {
                            normal : {  
                                color:'#289bf4',   
                                lineStyle:{  
                                    color:'#05fafa'  
                                }  
                            }  
                        },  
                    }]
                })
            },
        drawLine2(xArr,dataArr,dataArr1) {
            // dataArr 出场水 dataArr1管网水
                // 基于准备好的dom，初始化echarts实例
                let baoyanglv = this.$echarts.init(document.getElementById('rawWaterchart'))
                
                // 绘制图表
                baoyanglv.setOption({
                    // title: {
                    //     text: "单项合格率",
                    //     x: '5%',
                    //     textStyle: {
                    //         fontSize: 12,
                    //         color:'#fff'
                    //     }
                    // },
                    //     legend: {
                    //         // data: ['出厂水','管网水']
                    //         // orient: 'vertical',
                    //        left: 'right',
                    //        data: [
                    //            {
                    //                name:'出厂水',
                    //                icon : 'circle',
                    //                textStyle: {
                    //                     color: '#fff'          // 图例文字颜色
                    //                }
                    //         },   {
                    //                name:'管网水',
                    //                icon : 'circle',
                    //                textStyle: {
                    //                     color: '#fff'          // 图例文字颜色
                    //                }
                    //         },]
                    //     },
                        
                    // color: ['#3398DB','#f5b031'],
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top:"15",
                        left: '3%',
                        right: '4%',
                        bottom: '0%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'value',
                            // data : xArr,
                            axisTick: {
                                alignWithLabel: false
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#FFF',  //更改坐标轴文字颜色
                                    fontSize : 12      //更改坐标轴文字大小
                                },

                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#55bafe'
                                }
                            },
                             splitLine:{       //y轴
                                show:false
                            },
                            // inverse: true,
                            max:100,
                            min:0,
                            splitNumber: 2,
                        },
                        
                        
                    ],
                    yAxis : [
                        {
                            type : 'category',
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#FFF',  //更改坐标轴文字颜色
                                    fontSize : 12      //更改坐标轴文字大小
                                }
                            },
                            splitLine:{       //y轴
                                show:false
                            },
                            //   position: 'right',
                            axisLine: {
                                lineStyle: {
                                    color: '#55bafe'
                                }
                            },
                            data:xArr
                            
                        }
                    ],
                    series : [
                        {
                            name:'出厂水',
                            type:'bar',
                            barWidth: '30%',
                            data:dataArr,
                            itemStyle:{  
                                normal:{  
                                    color:'#05fafa',  
                                }  
                            },
                        },
                         {
                            name:'管网水',
                            type:'bar',
                            barWidth: '30%',
                            data:dataArr1,
                            itemStyle:{  
                                normal:{  
                                    color:'#f5b031',  
                                }  
                            },  
                        }
                    ]
                });
            },
        }
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
   
</style>
<style scoped>
   .reportScreen{
        width: 100%;
        height: 100%;
        padding:10px 10px 10px;
        background: #01070f url(../assets/img/wsbg.jpg) no-repeat;
        color: #fff;
        background-size: cover;
   }
   .reportScreen .title{
        height:3rem;
        line-height:3rem;
        background:rgba(4,30,102,0.5);
        padding-left:10px;
        font-weight:550;
        font-size:15px;
   }
   .reportScreen .title img{
       height: 50%;
       margin-right:10px;
       vertical-align: middle;
   }
   .reportScreen .conTable{
       padding:0 0.5rem;
       height:calc(100% - 3.5rem);
       
   }

   .lrTop,.lrBottom{
       height:calc((100% - 0.6rem)/2);
       width:100%;
       overflow-y:auto;
       background:rgba(8,27,70,0.5);
           /*background: #323d4f;*/
   }
   .lrTop{
       margin-bottom:0.6rem;
   }
   .reportScreen .el-col{
       height:100%;
       /*background: #323d4f;*/
   }
   .reportScreen .table-bordered{
        border-collapse: collapse;
        border-spacing: 0;
        width:100%;
        margin-top:0.5rem;
        height:100%;
   }
   .table-bordered tr{
        height:calc(100%/10);
   }
   .table-bordered th{
       background: rgba(13,169,253,0.2);
        /*height: 2.8rem;*/
        /*line-height: 3rem;*/
        
        color: #eaece9;
        font-weight: 400;
        text-align: center;
        font-size:16px;
   }
   .table-bordered td{
       color: #05fafa;
        text-align: center;
        border-top: 1px solid rgba(11,46,90,0.6);
        /*height: 2.8rem;*/
        /*line-height:2.8rem;*/
        overflow: hidden;
        font-size:16px;
   }
   .table-bordered  td.colorTd{
       color:#05fafa
   }
</style>